<template>
  <view>
    <view style="height: 82rpx;">
    </view>
	<view class="flex justify-start">
		<u-icon style="padding: 0 10rpx;font-size: 40rpx;" @click="navBack" name="arrow-left"></u-icon>
		<!-- <p style="width: 86rpx;" class="arrow-left"></p> -->
	  <p class="p-2 px-3" @click="aboutUs('addUser')">添加账号</p>
	</view>
    <uni-segmented-control
      :current="current"
      :values="items"
      @clickItem="onClickItem"
      style-type="text"
      active-color="#007bff"
    ></uni-segmented-control>
    <view class="content">
      <view v-if="current === 0">
        <u-swipe-action
          :show="item.show"
          :index="index"
          v-for="(item, index) in list"
          :key="item.id"
          @click="click"
          :options="options"
        >
          <view class="flex">
            <!-- <image mode="aspectFill" :src="item.images" /> -->
            <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
            <view class="flex-1 p-1 my-1">
              <view class="flex justify-between">
                <p>用户名:{{ item.username }}</p>
                <p>{{ item.createTime }}</p>
              </view>
              <text class="title u-line-2">手机号:{{ item.mobile }}</text>
            </view>
          </view>
        </u-swipe-action>
      </view>
      <view v-if="current === 1">
        <u-swipe-action
          :show="item.show"
          :index="index"
          v-for="(item, index) in list"
          :key="item.id"
          @click="click1"
          :options="options1"
        >
          <view class="flex">
            <!-- <image mode="aspectFill" :src="item.images" /> -->
            <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
            <view class="flex-1 p-1 my-1">
              <view class="flex justify-between">
                <p>用户名:{{ item.username }}</p>
                <p>{{ item.createTime }}</p>
              </view>
              <text class="title u-line-2">手机号:{{ item.mobile }}</text>
            </view>
          </view>
        </u-swipe-action>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['启用', '禁用'],
      current: 0,
      list: [],
      options: [
        {
          text: '禁用',
          style: {
            backgroundColor: '#dd524d',
          },
        },
      ],
      options1: [
        {
          text: '启用',
          style: {
            backgroundColor: '#dd524d',
          },
        },
      ],
    }
  },

  onLoad() {
    this.gitUserList(0)
  },
  methods: {
	  //回退
	  navBack: function () {
		  wx.navigateBack({
			delta: 1
		  })      
	  },
    // 关于我们
    aboutUs(name) {
      uni.navigateTo({
        url: `../my/${name}`,
      })
    },
    gitUserList(state) {
      let payload = {
        state,
        pageIndex: 0,
        pageSize: 10,
      }
      this.$store.dispatch('getFactoryUserPage', payload).then((res) => {
        // console.log(res)
        this.list = res.data.data.content
      })
    },
    // tabs 切换
    onClickItem(values) {
      this.current = values.currentIndex
      // console.log(values)
      this.gitUserList(values.currentIndex)
    },
    swipeChange(e, index) {
      // console.log('返回：', e)
      // console.log('当前索引：', index)
    },
    click(index, index1) {
      let user = uni.getStorageSync('userInfo')
      // console.log(this.list[index])
      // console.log(user.username)
      if (this.list[index].username === user.username) {
        this.$u.toast(`当前用户不可被禁用`)
        return
      }
      if (index1 == 0) {
        this.itemHandle(index, 1, '禁用')
      }
    },
    click1(index, index1) {
      // console.log(index)
      // console.log(index1)
      if (index1 == 0) {
        this.itemHandle(index, 0, '启用')
      }
    },
    itemHandle(index, state, info = '操作') {
      this.$store
        .dispatch('updateFactoryUserState', {
          userId: this.list[index].id,
          state,
        })
        .then((res) => {
          // console.log(res)
          this.list.splice(index, 1)
          this.$u.toast(`${info}了第${index + 1}个用户`)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  padding: 20rpx;
}

image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.title {
  text-align: left;
  font-size: 28rpx;
  color: $u-content-color;
  margin-top: 20rpx;
}
</style>
